import _ from "lodash";
import Cache from "@/services/Cache";
import globalData from "@/services/globalData";
import Taro, { Config } from "@tarojs/taro";
import {
  Button,
  Canvas,
  Image,
  View
  } from "@tarojs/components";
import { ComponentClass } from "react";
import { connect } from "@tarojs/redux";

type PageStateProps = {
  global: {
    system: object;
  };
};
type PageDispatchProps = {
  getSystemInfo: (data: object) => void;
};
// 页面属性
type PageOwnProps = {};
// 页面状态
type PageState = {
  foreground: {
    remoteUrl: string;
    zIndex: number;
    width: number;
    height: number;
    x: number;
    y: number;
    rotate: number;
    originWidth: number;
    originHeight: number;
    autoWidth: number;
    autoHeight: number;
    fixed: boolean;
    visible: boolean;
  };
};

type IProps = PageStateProps & PageDispatchProps & PageOwnProps;

interface Dynamic {
  props: IProps;
}

@connect(
  ({ counter, global }) => ({
    counter,
    global
  }),
  (dispatch) => ({
    getSystemInfo(data) {
      dispatch(getSystemInfo(data));
    }
  })
)
class Dynamic extends Taro.Component {
  config: Config = {
    navigationBarTitleText: "马卡龙玩图-taro",
    disableScroll: true // 不可以滚动
  };

  state = {};

  // 全局主题数据
  themeData = {
    sceneList: [],
    rawCoverList: [] // 原始贴纸数据
  };

  cache = {
    foreground: Cache.createCache("foreground"),
    cover: Cache.createCache("cover"),
    source: Cache.createCache("source")
  };

  componentWillMount() {}

  componentDidMount() {}

  componentWillReceiveProps() {}

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  async test() {}

  private pageToHome() {
    Taro.redirectTo({
      url: "/pages/home/index"
    });
  }

  private setStateTarget(key: any, val: any = {}, callback?: () => void) {
    const target = this.state[key];
    this.setState(
      {
        [key]: {
          ...target,
          ...val
        }
      },
      () => {
        // 如果callback是函数则执行
        if (_.isFunction(callback)) callback();
      }
    );
  }

  private getDomRect(id: string, callback: (rect: object) => void) {
    Taro.createSelectorQuery()
      .select(`#${id}`)
      .boundingClientRect((rect) => {
        if (_.isFunction(callback)) callback(rect);
      })
      .exec();
  }

  private calFrameRect() {
    this.getDomRect("crop", (rect: any) => {
      this.setState({
        frame: {
          width: rect.width,
          height: rect.width,
          left: rect.left,
          top: rect.top
        }
      });
    });
  }

  private getSceneInfoById(id: string, list: any[] = [], key: string) {
    return _.head(list.filter((v) => _.eq(v[key], id)));
  }

  private formatRawCoverList(list) {
    return list.map((v: any) => {
      let coverModel = {
        id: "",
        remoteUrl: "",
        originHeight: 0,
        originWidth: 0,
        autoHeight: 0,
        autoWidth: 0,
        height: 0,
        width: 0,
        x: 0,
        y: 0,
        rotate: 0,
        zIndex: 0,
        fixed: false,
        isActive: false,
        visible: false
      };
      coverModel.remoteUrl = v.imageUrl;
      coverModel.id = v.id;
      coverModel.zIndex = v.zIndex || 0;
      coverModel.fixed = v.fixed || false;
      coverModel.isActive = v.isActive || false;
      coverModel.visible = true;
      return coverModel;
    });
  }

  // 初始化系统信息
  private initSystemInfo() {
    const { getSystemInfo, global } = this.props;
    // 如果没有获取到系统信息
    if (_.isNil((global.system as any).model)) {
      const systemInfo = Taro.getSystemInfoSync();
      getSystemInfo(systemInfo);
    }
  }

  private initRawImage() {
    const { rawImage } = this.state;
    this.setState({
      rawImage: {
        ...rawImage,
        localUrl: globalData.choosedImage
      }
    });
  }

  private async initSegment() {
    const { foreground } = this.state;
    let segmentData = null;
    try {
      Taro.showLoading({
        title: "照片变身中...",
        mask: true
      });
      // segmentData = await
    } catch (err) {}
  }
}

export default Dynamic as ComponentClass<PageOwnProps, PageState>;
